<template>
  <view class="container">
    <wd-toast />
    <view @click.stop="closeOutside" v-for="item in consumables" :key="item.id">
      <wd-swipe-action>
        <wd-cell :title="item.consumabDto.showName">
          <wd-input-number
            v-model="item.quantity"
            @change="handelnumberchange(item, $event)"
          />
        </wd-cell>
        <template #right>
          <view class="action">
            <view
              class="button"
              style="background: #e2231a"
              @click="handleAction(item.id)"
              >删除</view
            >
          </view>
        </template>
      </wd-swipe-action>
    </view>
    <view class="fixed-button">
      <wd-button icon="check" @click="add" block>添加</wd-button>
    </view>
    <wd-popup v-model="show" position="top" :z-index="20">
      <wd-form ref="form" :model="fromdata">
        <wd-cell-group title="耗材信息" border>
          <wd-select-picker
            label="耗材类型"
            type="radio"
            filterable
            placeholder="请选择耗材类型"
            :show-confirm="false"
            v-model="platform"
            :columns="typeconsumables"
            @change="handelchange"
          />
          <wd-select-picker
            label="耗材"
            type="radio"
            filterable
            placeholder="请选择耗材"
            :columns="consumableslistselect"
            :show-confirm="false"
            v-model="fromdata.consunabID"
          />
          <wd-cell title="数量" title-width="100px" prop="quantity" center>
            <view style="text-align: left">
              <wd-input-number v-model="fromdata.quantity" />
            </view>
          </wd-cell>
        </wd-cell-group>
        <view style="margin: 15rpx">
          <wd-button icon="check" @click="handeladdconsum" block
            >确认添加</wd-button
          >
        </view>
      </wd-form>
    </wd-popup>
    <wd-message-box />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useToast, useQueue, useMessage } from '@/uni_modules/wot-design-uni'
import { onLoad } from '@dcloudio/uni-app'
import type { OrderConsumabsDto, AddConsumabDto } from '@/API/order/types'
import {
  getconsumablesbyid,
  addconsumbale,
  updateconsumables,
  deleteconsumables
} from '@/API/order/index'

import {
  getallconsumablestypes,
  getconsumablesbytype
} from '@/API/consumables/index'
import type {
  consumablestypesDto,
  SelectParams,
  consumablesDto
} from '@/API/consumables/types'
const message = useMessage()
const form = ref()
const platform = ref('')
const consumables = ref<OrderConsumabsDto[]>([])
const typeconsumables = ref<SelectParams[]>([])
const types = ref<consumablestypesDto[]>([])
const fromdata = ref<AddConsumabDto>({
  id: '',
  workOrderID: '',
  consunabID: '',
  quantity: 1
})
const consumableslistselect = ref<SelectParams[]>([])
const consumableslist = ref<consumablesDto[]>([])
const value2 = ref(1)
const { closeOutside } = useQueue()
const orderid = ref('')
const toast = useToast()
const show = ref(false)
const loaddata = async () => {
  const result = await getconsumablesbyid(orderid.value)
  consumables.value = result
}

const ToSelectParams = (taskTypes: consumablestypesDto[]): SelectParams[] => {
  return taskTypes.map(message => ({
    value: message.id,
    label: message.name,
    disabled: false // 默认禁用状态为 false
  }))
}

const consumablesDtoToSelectParams = (
  taskTypes: consumablesDto[]
): SelectParams[] => {
  return taskTypes.map(message => ({
    value: message.id,
    label: message.showName,
    disabled: false // 默认禁用状态为 false
  }))
}

onLoad(async option => {
  orderid.value = option!.id
  loaddata()
})
function handleAction(action: string) {
  //toast.show(`点击了${action}`)
  message
    .confirm({
      msg: `确认删除？`,
      title: '提示'
    })
    .then(async () => {
      await deleteconsumables(action)
      await loaddata()
    })
    .catch(() => {
      // console.log('点击了取消按钮')
    })
}
const add = async () => {
  const consumtype = await getallconsumablestypes()
  types.value = consumtype
  console.log(consumtype)
  typeconsumables.value = ToSelectParams(types.value)
  show.value = true
}
const handeladdconsum = async () => {
  fromdata.value.workOrderID = orderid.value
  console.log(fromdata.value)
  await addconsumbale(fromdata.value)
  await loaddata()
  show.value = false
}
const handelchange = async ({ value }: { value: string }) => {
  console.log('value', value)
  const result = await getconsumablesbytype(value)
  consumableslist.value = result
  consumableslistselect.value = consumablesDtoToSelectParams(
    consumableslist.value
  )
  if (consumableslistselect.value.length > 0) {
    const firstValue = consumableslistselect.value[0].value
    fromdata.value.consunabID = firstValue
  }
}
const handelnumberchange = async (
  item: OrderConsumabsDto,
  { value }: { value: number }
) => {
  await updateconsumables(item.id, {
    id: item.id,
    quantity: value,
    consunabID: item.consumabDto.id,
    workOrderID: orderid.value
  })

  await loaddata()
}
</script>

<style lang="scss" scoped>
:deep(.wd-button__text) {
  font-size: 35rpx;
}

.action {
  height: 100%;
}

.button {
  display: inline-block;
  padding: 0 11px;
  height: 100%;
  color: white;
  line-height: 42px;
}

.container {
  margin: 30rpx 0;

  .fixed-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.06);
    z-index: 10;
    text-align: center;
    padding-right: 20rpx;
    padding-left: 20rpx;
    padding-bottom: 50rpx;
  }
}
</style>
